<template>
  <div>
    <QueryForm
      v-model="filters"
      :query-form-config="queryFormConfig"
      @clear="clear"
      @handleQuery="getList(1)"
    />
    <div v-if="meta.indexOf('CoachManagementAdd') > -1" class="doumee_table_header">
      <el-button
        type="primary"
        @click="addCoach()"
      >{{ $t('message.add') }}</el-button>
    </div>
    <el-table
      ref="table"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-tablec"
    >
      <el-table-column
        align="center"
        :label="$t('message.jlmc')"
        prop="teacherName"
        show-overflow-tooltip
        min-width="120"
      >
        <template slot-scope="scope">
          <el-button type="text" @click="showTeacher(scope.row)">{{ scope.row.teacherName }}</el-button>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$t('message.touxian')"
        width="90"
        prop="teacherImage"
      >
        <template slot-scope="scope">
          <el-image
            style="width: 36px;"
            fit="contain"
            :src="scope.row.teacherImage"
            :preview-src-list="[scope.row.teacherImage]"
          />
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('message.sjh')" prop="phone" min-width="120" show-overflow-tooltip />
      <el-table-column
        align="center"
        :label="$t('message.denji')"
        prop="levelName"
        min-width="120"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="$t('message.sklx')"
        prop="courseType"
        min-width="120"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="$t('message.ykgz')"
        prop="courseRuleInfo"
        min-width="300"
        show-overflow-tooltip
      >
        <template v-slot="scope">
          <div v-if="scope.row.courseRuleInfo && scope.row.courseRuleInfo.length > 0">
            <template v-for="item,index in scope.row.courseRuleInfo">
              <div v-if="index < 4" :key="item">{{ item }}</div>
            </template>
          </div>
          <div v-if="scope.row.courseRuleInfo && scope.row.courseRuleInfo.length > 0">
            <div v-if="scope.row.courseRuleInfo.length > 4" class="pointer primaryColor" @click="showTeacher(scope.row)">{{ $t('message.ckgd') }}</div>
          </div>
          <!-- </el-popover> -->
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$t('message.sex')"
        prop="sex"
        min-width="80"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span v-if="scope.row.sex == '1'">{{ $t('message.nan') }}</span>
          <span v-else-if="scope.row.sex == '2'">{{ $t('message.nv') }}</span>
          <span v-else>{{ $t('message.bm') }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$t('message.sort')"
        prop="sortNum"
        min-width="80"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="$t('message.createTime')"
        prop="createTime"
        show-overflow-tooltip
        min-width="160"
      />
      <el-table-column :label="$t('message.zgzt')" :min-width="$i18n.locale === 'ZH'? 80 : 100" align="center" fixed="right" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-switch v-model="scope.row.status" active-value="1" inactive-value="0" @change="editStatus(scope.row)" />
        </template>
      </el-table-column>
      <el-table-column :label="$t('message.status')" :min-width="$i18n.locale === 'ZH'? 60 : 120" align="center" fixed="right" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.isOnJob == '1' ? $t('message.zz') : $t('message.lz') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('message.caozuo')" :width="$i18n.locale === 'ZH'? 180 : 260" align="center" fixed="right">
        <template slot-scope="scope">
          <div class="flex-cc">
            <el-button
              v-if="meta.indexOf('CoachManagementAdd') > -1"
              v-preventReClick
              type="text"
              @click="addCoach(scope.row)"
            >{{ $t('message.edit') }}</el-button>
            <el-button
              v-if="scope.row.isOnJob == '1' && meta.indexOf('TeacherRuleAddOrUpdate') > -1"
              v-preventReClick
              type="text"
              @click="rowRuleClick(scope.row)"
            >{{ $t('message.ykgz') }}</el-button>
            <el-button
              v-if="scope.row.isOnJob != '1' && meta.indexOf('CoachManagementAdd') > -1"
              v-preventReClick
              class="secondColor"
              type="text"
              @click="rowClickDel(scope.row)"
            >{{ $t('message.del') }}</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <Paginations
      :total="total"
      :page="pagination.page"
      @current-change="getList"
      @SizeChange="handleSizeChange"
    />
    <el-drawer
      :title="form.teacherId ? $t('message.edit') + $t('message.jiaolian') : $t('message.add') + $t('message.jiaolian')"
      :visible.sync="showAddCoach"
      :before-close="addClose"
      size="800px"
    >
      <el-form ref="form" :model="form" label-suffix="：" :rules="rules" label-width="auto">
        <el-form-item :label="$t('message.touxian')" prop="teacherImage">
          <transition name="fade">
            <Cropper
              v-if="dialogCropperVisible"
              :option-img="optionImg"
              :fileinfo="fileinfo"
              use-type="TEACHER_IMG"
              :fixed-number="[32, 32]"
              @formSubmit="cropperSubmit"
              @formClose="cropperClose"
            />
          </transition>
          <div class="df_ac">
            <el-upload
              class="device-uploader"
              :action="uploadFileUrl"
              accept=".jpg,.png"
              :data="uploadData"
              :show-file-list="false"
              :auto-upload="false"
              :on-change="addFileChange"
            >
              <i class="el-icon-plus uploader-icon" />
              <div
                v-show="form.teacherImage"
                class="file"
                :style="'background-image: url(' + form.teacherImage + ')'"
              >
                <div class="delete">
                  <i
                    class="el-icon-delete icon"
                    @click.stop="deleteDeviceConfigAddImage"
                  />
                </div>
              </div>
            </el-upload>
            <div class="placeholder9">
              <div>{{ $t('message.jycc') }}：{{ '100px X 100px' }}</div>
              <div>{{ $t('message.zctpsm') }}</div>
            </div>
          </div>
        </el-form-item>
        <el-form-item :label="$t('message.sph')">
          <el-button
            type="primary"
            @click="openChanne"
          ><span class="df_ac"><i class="el-icon-link fs_18" />{{ form.videoId && form.videoNumberId ? $t('message.ygl') : $t('message.glwxsphsp') }}</span></el-button>
          <span
            class="placeholder9 ml10"
          >{{ $t('message.szspmsm') }}</span>
        </el-form-item>
        <el-form-item :label="$t('message.jlxm')" prop="teacherName">
          <el-input v-model="form.teacherName" class="w200" :placeholder="$t('message.qsr') + $t('message.jlxm')" />
        </el-form-item>
        <el-form-item :label="$t('message.sjh')" prop="phone">
          <el-input
            v-model="form.phone"
            class="w200"
            :placeholder="$t('message.qsr') + $t('message.sjh')"
            @input="phoneChange"
          />
        </el-form-item>
        <el-form-item :label="$t('message.sklx')" prop="type">
          <el-checkbox-group v-model="form.type">
            <el-checkbox label="0">{{ $t('message.cgk') }}</el-checkbox>
            <el-checkbox label="1">{{ $t('message.sjk') }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item
          :label="$t('message.denji')"
          :rules="{ required: form.type.indexOf('1') > -1 ? true : false, message: this.$t('message.qxz') + this.$t('message.jldj'), trigger: 'change' }"
        >
          <el-select v-model="form.levelId" :placeholder="$t('message.qxz') + $t('message.jldj')" class="w200">
            <el-option
              v-for="item in levelList"
              :key="item.id"
              :label="item.levelName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('message.sex')" prop="sex">
          <el-radio v-model="form.sex" label="1">{{ $t('message.nan') }}</el-radio>
          <el-radio v-model="form.sex" label="2">{{ $t('message.nv') }}</el-radio>
        </el-form-item>
        <el-form-item v-if="form.teacherId && form.teacherId != ''" :label="$t('message.zzzt')" prop="isOnJob">
          <el-radio v-model="form.isOnJob" label="0">{{ $t('message.lz') }}</el-radio>
          <el-radio v-model="form.isOnJob" label="1">{{ $t('message.zz') }}</el-radio>
        </el-form-item>
        <el-form-item :label="$t('message.jljs')" prop="info">
          <div class="secondColor">{{ $t('message.tpbnfz') }}</div>
          <!-- <WangEditor
            ref="myTextEditor"
            :value="form.info"
            @input="(e) => $set(form, 'info', e)"
          /> -->
          <quill-editor
            ref="myTextEditor"
            v-model="form.info"
            :placeholder="$t('message.qsrnr')"
            class="myQuillEditor"
            :options="quillOption"
          />
        </el-form-item>
        <el-form-item :label="$t('message.sort')">
          <el-input
            v-model="form.sortNum"
            class="w200"
            oninput="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
            :placeholder="$t('message.qsr') + $t('message.sort')"
          />
        </el-form-item>
        <el-form-item>
          <el-button v-preventReClick :loading="subLoading" type="primary" @click="confirmAddTeacher">{{ $t('message.qr') }}</el-button>
          <el-button @click="cancelAddTeacher">{{ $t('message.qx') }}</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
    <el-drawer
      :title="$t('message.jlxq')"
      :visible.sync="showDetail"
      size="900px"
    >
      <div class="detail_info">
        <div class="header df">
          <img class="img" :src="detailInfo.teacherImage" alt="">
          <div class="content">
            <div class="name_wrap">
              <span>{{ detailInfo.teacherName }}</span>
              <span class="fs12 ml10">{{ detailInfo.sex == '1' ? $t('message.nan') : detailInfo.sex == '2' ? $t('message.nv') : $t('message.bm') }}</span>
            </div>
            <div class="df mt20">
              <div class="flex1">{{ $t('message.sjh') }}：{{ detailInfo.phone }}</div>
              <div class="flex1">{{ $t('message.status') }}：{{ detailInfo.isOnJob == '1' ? $t('message.zz') : $t('message.lz') }}</div>
              <div class="flex1">{{ $t('message.denji') }}：{{ detailInfo.levelName }}</div>
              <div class="flex1">{{ $t('message.sklx') }}：{{ detailInfo.courseType }}</div>
            </div>
            <div class="des"><span v-html="detailInfo.info" /></div>
          </div>
        </div>
        <el-tabs v-model="detailInfoFlag" @tab-click="detailInfoTabsChange">
          <el-tab-pane :label="$t('message.ykgz')" name="1">
            <el-table
              :data="detailInfo.courseRuleInfoTemp"
              border
              fit
              :header-row-class-name="'table-header'"
              class="doumee-element-table courseRuleInfo_wrap"
            >
              <el-table-column
                align="center"
                :label="$t('message.kcmc')"
                prop="name"
                show-overflow-tooltip
                min-width="120"
              />
              <el-table-column
                align="center"
                :label="$t('message.sksj')"
                prop="time"
                show-overflow-tooltip
                min-width="120"
              />
            </el-table>
            <!-- <div class="courseRuleInfo_wrap">
              <div v-for="item in detailInfo.courseRuleInfo" :key="item" class="item">
                {{ item }}
              </div>
            </div> -->
          </el-tab-pane>
          <el-tab-pane :label="$t('message.ksxx')" name="2">
            <QueryForm
              v-model="detailFilters"
              :query-form-config="detailFormConfig"
              @clear="detailClear"
              @handleQuery="courseTimeList"
            >
              <el-button slot="btns" :loading="loadingExport" type="primary" @click="courseInfoEx">{{ $t('message.daochu') }}</el-button>
            </QueryForm>
            <el-table
              ref="detailTableRef"
              :data="courseTList"
              element-loading-text="Loading"
              border
              fit
              :header-row-class-name="'table-header'"
              class="doumee-element-table"
            >
              <el-table-column
                align="center"
                :label="$t('message.kcmc')"
                prop="courseName"
                show-overflow-tooltip
                min-width="120"
              />
              <el-table-column
                align="center"
                :label="$t('message.sksj')"
                prop="classTime"
                show-overflow-tooltip
                min-width="200"
              />
              <el-table-column
                align="center"
                :label="$t('message.kclx')"
                show-overflow-tooltip
                min-width="80"
              >
                <template v-slot="scope">
                  <span>{{ scope.row.type == '0' ? $t('message.cgk') : $t('message.sjk') }}</span>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                :label="$t('message.kszt')"
                show-overflow-tooltip
                min-width="80"
              >
                <template v-slot="scope">
                  <span>{{ scope.row.status == '0' ? $t('message.wski') : $t('message.ysk') }}</span>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                :label="$t('message.qdxy')"
                prop="num"
                show-overflow-tooltip
                min-width="80"
              />
              <el-table-column
                align="center"
                :label="$t('message.wqdxy')"
                prop="unNum"
                show-overflow-tooltip
                min-width="100"
              />
            </el-table>
            <Paginations
              :total="detailtotal"
              :page="detailPaination.page"
              @current-change="detailPageChange"
              @SizeChange="detailSizeChange"
            />
          </el-tab-pane>
        </el-tabs>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showDetail = false">{{ $t('message.qx') }}</el-button>
        <el-button type="primary" @click="showDetail = false">{{ $t('message.qd') }}</el-button>
      </span>
    </el-drawer>
    <el-dialog
      :title="$t('message.glsph')"
      :visible.sync="isShowChannel"
      width="800px"
    >
      <div class="warnningTip">
        {{ $t('message.sphspsm') }}
      </div>
      <el-form
        ref="channelRef"
        class="doumee-form"
        :model="form"
        :rules="rules"
        label-width="auto"
        label-suffix="："
      >
        <el-form-item :label="$t('message.sphID')" prop="videoNumberIdTemp">
          <el-input
            v-model="form.videoNumberIdTemp"
            style="width: 400px"
            :placeholder="$t('message.qsr') + $t('message.sphID')"
          />
        </el-form-item>
        <el-form-item>
          <div class="placeholder9">
            <span>{{ $t('message.thhqsphdl') }}</span>
            <a
              href="https://channels.weixin.qq.com/"
              target="_blank"
              class="primaryColor underline"
            >{{ $t('message.sphzs') }}</a>
            <span>{{ $t('message.zsyfzsphid') }}</span>
          </div>
          <div>
            <el-image
              class="w400"
              :preview-src-list="[
                'https://axure-file.lanhuapp.com/md5__6d903ccf499fd6042fd1a332091bdbfd.png',
              ]"
              src="https://axure-file.lanhuapp.com/md5__6d903ccf499fd6042fd1a332091bdbfd.png"
            />
          </div>
        </el-form-item>
        <el-form-item :label="$t('message.spID')" prop="videoIdTemp">
          <el-input
            v-model="form.videoIdTemp"
            style="width: 400px"
            :placeholder="$t('message.qsr') + $t('message.spID')"
          />
        </el-form-item>
        <el-form-item>
          <div class="placeholder9">
            <span>{{ $t('message.thhqspdl') }}</span>
            <a
              href="https://channels.weixin.qq.com/"
              target="_blank"
              class="primaryColor underline"
            >{{ $t('message.sphzs') }}</a>
            <span>{{ $t('message.zdtglfzspid') }}</span>
          </div>
          <div>
            <el-image
              class="w400"
              :preview-src-list="[
                'https://axure-file.lanhuapp.com/md5__fe942d7dc67e783dd04aeb849577af58.png',
              ]"
              src="https://axure-file.lanhuapp.com/md5__fe942d7dc67e783dd04aeb849577af58.png"
            />
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeChanne">{{ $t('message.qx') }}</el-button>
        <el-button type="primary" @click="subChanne">{{ $t('message.qd') }}</el-button>
      </span>
    </el-dialog>
    <Ykgz ref="ykgz" :teacher-name="detailInfo.teacherName" :teacher-id="teacherId" @success="getList()" />
  </div>
</template>

<script>
import {
  uploadFile,
  addTeacher,
  teacherList,
  closeTeacher,
  coatchStuList,
  teacherLevelListPost,
  getTeacherRule,
  updateTeacherRule,
  publishCourseList,
  courseTimeListByTeacher,
  courseInfoExport
} from '@/api'
import { parseTime } from '@/utils'
import Cropper from '@/components/cropper'
import Ykgz from './ykgz.vue'
import store from '@/store'
import { queryFormConfig, detailFormConfig, weekDays } from './config'
import QueryForm from '@/components/QueryForm'
// import WangEditor from '@/components/quillOption'
import { quillEditor } from 'vue-quill-editor'
import quillConfig from '@/api/sc.js'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
  components: {
    Cropper,
    Ykgz,
    QueryForm,
    quillEditor
  },
  props: {
    meta: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      quillOption: quillConfig,
      modalDialog: store.getters.dialog,
      isShowChannel: false,
      teacherId: '',
      queryFormConfig,
      detailFormConfig,
      subLoading: false,
      levelList: [],
      isShowYkRules: false,
      TeacherRule: [],
      ykSubLoading: false,
      pubCourseList: [],
      ykForm: {},
      detailInfo: {},
      weekDays,

      uploadFileUrl: uploadFile,
      uploadData: {
        folder: 'TEACHER_IMG',
        type: ''
      },
      dialogCropperVisible: false,
      param: {},
      files: {},
      fileinfo: {},
      list: [],
      total: 0,
      filters: {},
      detailFilters: {},
      detailPaination: {
        page: 1,
        rows: 10
      },
      detailtotal: 0,
      courseTList: [],
      loadingExport: false,

      pagination: {
        page: 1,
        rows: 10
      },
      listLoading: false,
      showAddCoach: false,
      showDetail: false,
      detailInfoFlag: '1',
      venueId: sessionStorage.getItem('venueId'),
      form: {
        type: []
      },
      projectMessage: [],
      rules: {
        videoNumberIdTemp: [{ required: true, message: this.$t('message.qsr'), trigger: 'blur' }],
        videoIdTemp: [{ required: true, message: this.$t('message.qsr'), trigger: 'blur' }],
        teacherImage: [
          { required: true, message: this.$t('message.qsc') + this.$t('message.jltx'), trigger: 'blur' }
        ],
        teacherName: [
          { required: true, message: this.$t('message.qsr') + this.$t('message.jlxm'), trigger: 'blur' }
        ],
        phone: [
          { required: true, message: this.$t('message.qsr') + this.$t('message.sjh'), trigger: 'blur' }
        ],
        sex: [
          { required: true, message: this.$t('message.qxz') + this.$t('message.sex'), trigger: 'change' }
        ],
        isOnJob: [
          { required: true, message: this.$t('message.qxz') + this.$t('message.zzzt'), trigger: 'change' }
        ],
        type: [
          { type: 'array', required: true, message: this.$t('message.qzsxzygsklx'), trigger: 'change' }
        ],
        info: [
          { required: true, message: this.$t('message.qsr') + this.$t('message.jljs'), trigger: 'blur' }
        ]
      },
      // 教练详情
      coatchDetailForm: {
        teacherId: '',
        classTime: '',
        status: ''
      },
      coatchDetailpagination: {
        page: 1,
        rows: 10
      },
      classesTotal: 0,
      classStatus: [
        { id: '0', name: this.$t('message.dsk') },
        { id: '1', name: this.$t('message.ysk') }
      ],
      classList: []
    }
  },
  computed: {
    selTeacherRule() {
      const temp = []
      const dayMap = ['', this.$t('message.z1'), this.$t('message.z2'), this.$t('message.z3'), this.$t('message.z4'), this.$t('message.z5'), this.$t('message.z6'), this.$t('message.z7')]
      const TeacherRule = this.TeacherRule
      const pubCourseList = this.pubCourseList
      TeacherRule.forEach(item => {
        if (item.courseId) {
          const temp = pubCourseList.find(i => i.courseId === item.courseId)
          if (temp && temp.courseName) {
            item.courseName = temp.courseName
          } else {
            item.courseName = item.courseName || ''
          }
        }
        if (item.daysTemp && item.daysTemp.length > 0) {
          item.daysTemp.forEach(item2 => {
            const obj = {
              day: dayMap[item2],
              dayNum: item2,
              courseName: item.courseName || '',
              courseId: item.courseId || '',
              beginTime: item.beginTime,
              endTime: item.endTime
            }
            temp.push(obj)
          })
        }
      })
      temp.sort((a, b) => {
        return a.dayNum - b.dayNum
      })
      return temp
    }
  },
  created() {
    this.meta = this.$route.meta.buttons || []
    this.getList(1)
    this.getCoachLevelList()
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.table.doLayout()
    })
  },
  activated() {
    this.$nextTick(() => {
      this.$refs.table.doLayout()
    })
  },
  methods: {
    subTeacherRule() {
      // return
      let count = 0
      const TeacherRule = [...this.TeacherRule]
      const temp = TeacherRule.map(item => {
        if (!item.beginTime || !item.endTime || !item.courseId || item.daysTemp.length === 0) {
          count++
          return
        }
        item.days = item.daysTemp.join(',')
        return item
      })
      if (count > 0) {
        return this.$message.warning(this.$t('message.sygzbt'))
      }
      this.ykSubLoading = true
      updateTeacherRule({
        param: {
          ruleData: temp,
          teacherId: this.detailInfo.teacherId
        }
      }).then(res => {
        this.ykSubLoading = false
        if (res.errorCode !== '000000') return
        this.$message.success(this.$t('message.tjcg'))
        this.getList()
        this.isShowYkRules = false
      }, () => {
        this.ykSubLoading = false
      })
    },
    subChanne() {
      this.$refs.channelRef.validate((valid) => {
        if (valid) {
          const { form } = this
          this.$set(this.form, 'videoId', form.videoIdTemp)
          this.$set(this.form, 'videoNumberId', form.videoNumberIdTemp)
          this.isShowChannel = false
        } else {
          console.log('===')
        }
      })
    },
    openChanne() {
      this.isShowChannel = true
      const { form } = this
      this.$set(this.form, 'videoIdTemp', form.videoId || '')
      this.$set(this.form, 'videoNumberIdTemp', form.videoNumberId || '')
    },
    closeChanne() {
      this.$set(this.form, 'videoIdTemp', '')
      this.$set(this.form, 'videoNumberIdTemp', '')
      this.isShowChannel = false
    },
    ykAdd() {
      this.TeacherRule.push({
        courseId: '',
        daysTemp: []
      })
    },
    courseTimeList() {
      courseTimeListByTeacher({
        param: { ...this.detailFilters, teacherId: this.detailInfo.teacherId },
        pagination: this.detailPaination
      }).then(res => {
        this.courseTList = res.record.paramList || []
        this.detailtotal = res.totalCount
      })
    },
    teacherRuleDel(i) {
      const TeacherRule = [...this.TeacherRule]
      TeacherRule.splice(i, 1)
      this.TeacherRule = TeacherRule
    },
    teacherRuleCopy(row) {
      const temp = JSON.parse(JSON.stringify(row))
      this.TeacherRule.push(temp)
    },
    getPublishCourseList() {
      publishCourseList({
        param: {
          courseType: '4',
          venueIds: [sessionStorage.getItem('venueId')]
        }
      }).then(res => {
        this.pubCourseList = res.recordList || []
      })
    },
    // 约课规则 获取
    getTeacherRules(teacherId) {
      getTeacherRule({ param: { teacherId }}).then(res => {
        this.TeacherRule = res.recordList.map(item => {
          if (item.days) {
            item.daysTemp = item.days.split(',')
          }
          return item
        })
        if (this.TeacherRule.length === 0) {
          this.TeacherRule.push({
            daysTemp: []
          })
        }
      })
    },
    rowClickDel(row) {
      this.$confirm(this.$t('message.scjltc'), this.$t('message.ts'), {
        confirmButtonText: this.$t('message.qd'),
        cancelButtonText: this.$t('message.qx'),
        type: 'warning',
        callback: () => {},
        beforeClose: (action, ctx, close) => {
          if (action !== 'confirm') {
            close()
            return
          }
          ctx.confirmButtonLoading = true
          closeTeacher({ param: { teacherId: row.teacherId, type: 1 }}).then((res) => {
            ctx.confirmButtonLoading = false
            close()
            if (res.errorCode === '000000') {
              this.$message.success(this.$t('message.delcg'))
              this.getList(1)
            }
          })
            .catch(() => { ctx.confirmButtonLoading = false })
        }
      }).finally(() => {})
    },
    rowRuleClick(row) {
      this.detailInfo = { ...row }
      // this.isShowYkRules = true
      // this.$nextTick(() => {
      //   this.getPublishCourseList()
      //   this.getTeacherRules(row.teacherId)
      // })
      this.teacherId = row.teacherId
      this.$refs.ykgz.rowRuleClick()
    },
    // 教练详情
    showTeacher(form) {
      form = JSON.stringify(form)
      form = JSON.parse(form)
      this.detailInfoFlag = '1'
      this.showDetail = true
      if (form.courseRuleInfo && form.courseRuleInfo.length > 0) {
        form.courseRuleInfoTemp = form.courseRuleInfo.map(item => {
          const index = item.indexOf(':')
          const obj = {
            name: item.slice(0, index),
            time: item.slice(index + 2)
          }
          return obj
        })
      }

      this.detailInfo = form
      this.coatchDetailForm.teacherId = form.teacherId
    },
    courseInfoEx() {
      this.loadingExport = true
      courseInfoExport({
        param: { ...this.detailFilters, teacherId: this.detailInfo.teacherId }
      }).then(res => {
        this.loadingExport = false
        if (res.errorCode !== '000000') return
        const a = document.createElement('a') // 创建一个a标签元素
        a.style.display = 'none' // 设置元素不可见
        a.href = res.record.showUrl // 设置下载地址
        document.body.appendChild(a) // 加入
        a.click() // 触发点击,下载
        document.body.removeChild(a) //
        this.$message.success(this.$t('message.dccg'))
      }, () => {
        this.loadingExport = false
      })
    },
    detailInfoTabsChange(vla) {
      console.log(this.detailInfoFlag)
      if (this.detailInfoFlag === '2') {
        this.courseTimeList()
      }
    },
    ykCloseDrawer() {
      this.isShowYkRules = false
    },
    addCoach(row) {
      if (row && row.teacherId) {
        const obj = JSON.parse(JSON.stringify(row))
        this.form = obj
        if (this.form.type) {
          this.form.type = this.form.type.split(',')
        } else {
          this.form.type = []
        }
      } else {
        this.form = {
          type: []
        }
      }
      this.showAddCoach = true
    },
    confirmAddTeacher() {
      const param = { ...this.form }
      param.type = param.type.join(',')
      if (this.form.teacherId) {
        this.$refs.form.validate((valid) => {
          if (valid) {
            if (param.type.indexOf('1') > -1) {
              if (!param.levelId) return this.$message.warning(this.$t('message.sjkjlbxxzjldj'))
            }
            this.subLoading = true
            addTeacher({
              param
            })
              .then((res) => {
                if (res.errorCode !== '000000') return
                this.subLoading = false
                this.$message.success(this.$t('message.editcg'))
                this.showAddCoach = false
                this.getList(1)
              })
              .catch(() => {
                this.subLoading = false
              })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      } else {
        this.$refs.form.validate((valid) => {
          if (valid) {
            if (param.type.indexOf('1') > -1) {
              if (!param.levelId) return this.$message.warning(this.$t('message.sjkjlbxxzjldj'))
            }
            this.subLoading = true
            addTeacher({
              param
            })
              .then((res) => {
                if (res.errorCode !== '000000') return
                this.subLoading = false
                this.$message.success(this.$t('message.tjcg2'))
                this.showAddCoach = false
                this.getList(1)
              })
              .catch(() => {
                this.subLoading = false
              })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      }
    },
    // 约课规则 时间限制
    selTimeChange(item) {
      if (item.beginTime && item.endTime && item.beginTime > item.endTime) {
        item.endTime = null
        return this.$message.warning(this.$t('message.jssjydykssj'))
      }
    },
    // 启用或禁用
    editStatus(row) {
      closeTeacher({
        param: {
          teacherId: row.teacherId,
          status: row.status,
          type: '0'
        }
      })
        .then((res) => {
          if (res.errorCode === '000000') {
            this.$message.success(this.$t('message.ztgxcg'))
            this.showAddCoach = false
            this.getList(1)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    handleSizeChange(value) {
      this.pagination.rows = value
      this.getList(1)
    },
    detailClear() {
      this.detailFilters = {}
      this.detailPaination.page = 1
      this.courseTimeList()
    },
    detailSizeChange(value) {
      this.detailPaination.rows = value
      this.courseTimeList()
    },
    detailPageChange(val) {
      this.detailPaination.page = val
      this.courseTimeList()
    },
    phoneChange() {
      this.form.phone = this.form.phone.replace(/[^\d]/g, '')
      if (this.form.phone.length > 11) {
        this.form.phone = this.form.phone.substr(0, 11)
      }
      // 如果依赖element的表单校验，就到这里就OK了，如果单单用了el-input不用element的表单校验，那继续往下
      var reg = /^1[3456789]\d{9}$/
      if (this.form.phone.length >= 11 && !reg.test(this.form.phone)) {
        this.$message.warning(this.$t('message.qsrzqdsjhmgs'))
      }
    },
    // 上传图片成功
    uploadSuccess(res, file, fileList) {
      if (res.success) {
        this.$set(this.form, 'teacherImage', res.showUrl)
        this.$set(this.form, 'image', res.insertUrl)
      } else {
        this.$message.error(res.msg || this.$t('message.scsb'))
      }
      this.$refs.form.clearValidate()
    },
    // 上传图片，开始裁剪
    async addFileChange(file) {
      // 上传，拿到file文件
      this.files = file.raw
      this.$nextTick(() => {
        this.optionImg = URL.createObjectURL(file.raw)
        this.fileinfo = file.raw
        this.dialogCropperVisible = true
      })
    },
    // 裁剪确定按钮
    cropperSubmit(config) {
      // preImg 完整路径  urlPre 不包含域名
      if (config.success) {
        this.$set(this.form, 'teacherImage', config.showUrl)
        this.$set(this.form, 'image', config.insertUrl)
        this.fileinfo = config
        // this.$refs.ruleForm.clearValidate();
        this.dialogCropperVisible = false
      } else {
        this.$message.error(config.msg || this.$t('message.scsb'))
        // this.$refs.ruleForm.clearValidate();
        this.dialogCropperVisible = false
      }
    },
    // 裁剪取消
    cropperClose() {
      this.dialogCropperVisible = false
    },
    // 删除已上传图片
    deleteDeviceConfigAddImage() {
      this.$set(this.form, 'teacherImage', '')
      this.$set(this.form, 'image', '')
    },
    getCoachLevelList() {
      teacherLevelListPost({ param: {}}).then(res => {
        this.levelList = res.recordList || []
        queryFormConfig.formItems[1].options = this.levelList.map(item => {
          item.value = item.id
          item.label = item.levelName
          return item
        })
      })
    },
    // 取消编辑
    cancelEditTeacher() {
      this.showDetail = false
    },
    // 取消添加
    cancelAddTeacher() {
      this.showAddCoach = false
    },
    // 关闭弹框
    addClose() {
      this.showAddCoach = false
      this.$refs.form.resetFields()
    },
    getList(page) {
      const { filters, pagination } = this
      const venueId = sessionStorage.getItem('venueId')
      if (page) {
        pagination.page = page
        this.pagination.page = page
      }
      pagination.firstQueryTime = parseTime(new Date())
      this.listLoading = true
      teacherList({
        pagination,
        param: {
          ...filters,
          venueId
        }
      })
        .then((res) => {
          this.listLoading = false
          if (res.errorCode !== '000000') return
          this.list = res.recordList
          this.total = res.totalCount
        })
        .catch(() => {
          this.listLoading = false
        })
    },
    // 查找
    clear() {
      this.filters = {}
      this.getList(1)
    },
    clearStuForm() {
      this.coatchDetailForm = { teacherId: this.coatchDetailForm.teacherId }
      this.getCoatchStuList(1)
    },
    // 教练详情
    getCoatchStuList() {
      // console.log(this.coatchDetailForm);
      coatchStuList({
        param: {
          ...this.coatchDetailForm
        },
        pagination: {
          ...this.coatchDetailpagination
        }
      })
        .then(res => {
          this.classesTotal = res.totalCount
          this.classList = res.record.paramList || []
        })
        .catch(() => {})
    },
    editCoach() {
      // :todo 保存
      this.confirmAddTeacher()
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";
.sel_teacher_rule{
  display: flex;
  flex-wrap: wrap;
  max-height: 260px;
  overflow: auto;
  border: 1px solid #F7F7F7;
  border-radius: 8px;
  padding: 12px;
  .item{
    width: 319px;
    height: 30px;
    display: flex;
    align-items: center;
    border-radius: 4px;
    background-color: #F7F7F7;
    margin-bottom: 10px;
    margin-right: 10px;
    padding-left: 20px;
    &:nth-of-type(2n){
      margin-right: 0;
    }
  }
}
.courseRuleInfo_wrap{
  width: 100%;
  margin-bottom: 40px;
  .item{
    margin-bottom: 8px;
  }
}
.rule_label{
  width: 120px;
  text-align: right;
}
.ykList{
  width: 100%;
  .yk_item{
    margin-bottom: 12px;
  }
  .add_btn{
    text-align: center;
    width: 680px;
    height: 36px;
    line-height: 36px;
    color: var(--primaryColor);
    background: #F4F7FC;
    cursor: pointer;
    margin-bottom: 20px;
  }
}
.detail_info{
  .header{
    .img{
      width: 80px;
      height: 80px;
      margin-right: 10px;
    }
    .content{
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  }
}
.device-uploader {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  cursor: pointer;
  border: 1px dashed #ccc;
  border-radius: 8px;
  transition: all 0.3s;
  margin-right: 20px;
  &:hover {
    border-color: $menuActive;
    .uploader-icon {
      color: $menuActive;
    }
  }
  ::v-deep .el-upload {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .file {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      .delete {
        background-color: rgba(0, 0, 0, 0.5);
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        display: none;
        align-items: center;
        justify-content: center;
        .icon {
          color: #fff;
        }
      }
      &:hover {
        .delete {
          display: flex;
        }
      }
    }
  }
  .uploader-icon {
    color: #aaaaaa;
    font-size: 22px;
    transition: all 0.3s;
  }
}

.edit-btn {
  display: flex;
  flex-direction: row-reverse;
}
.title-style {
  font-size: 22px;
  font-weight: 500;
  line-height: 36px;
  color: #000;
  margin-bottom: 20px;
}
</style>
